﻿@page
@model ThridGroup.ERP.Web.Pages.IndexModel
@using ThridGroup.ERP.Web.Menus
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@using Microsoft.AspNetCore.Mvc.Localization
@using ThridGroup.ERP.Localization
@using Volo.Abp.Users
@using ThridGroup.ERP.Web.Pages
@inject IPageLayout PageLayout
@inject IHtmlLocalizer<ERPResource> L
@inject ICurrentUser CurrentUser
@{
    ViewBag.PageTitle = L["仪表盘"];
    PageLayout.Content.MenuItemName = ERPMenus.Home;
}

@section styles {
    <abp-style src="/Pages/Index.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/css/layui.css" />
    <style>
        .stat-card {
            transition: all 0.3s;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
        }
        
        .stat-icon {
            font-size: 2.5rem;
            opacity: 0.8;
        }
        
        .chart-container {
            height: 300px;
            width: 100%;
        }
        
        .todo-item {
            border-left: 3px solid #1890ff;
            padding: 10px 15px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
            border-radius: 3px;
            transition: all 0.2s;
        }
        
        .todo-item:hover {
            background-color: #f0f0f0;
            transform: translateX(5px);
        }
        
        .todo-item.completed {
            border-left-color: #52c41a;
        }
        
        .todo-item.overdue {
            border-left-color: #f5222d;
        }
        
        .quick-action {
            transition: all 0.3s;
        }
        
        .quick-action:hover {
            transform: scale(1.05);
        }
    </style>
}

@if (!CurrentUser.IsAuthenticated)
{
    <div class="text-center py-5">
        <div class="container">
            <h1 class="display-4 mb-4">欢迎使用第三组企业资源计划系统</h1>
            <p class="lead text-muted mb-4">集成化的企业管理平台，助力企业高效运营</p>
            <a href="/Account/Login" class="btn btn-primary btn-lg mb-4">
                <i class="fa-solid fa-right-to-bracket me-1"></i>
                <span>登录系统</span>
            </a>
            <div class="row mt-5">
                <div class="col-md-4">
                    <div class="card stat-card">
                        <div class="card-body text-center py-4">
                            <i class="fa-solid fa-layer-group stat-icon text-primary mb-3"></i>
                            <h4>全面的业务模块</h4>
                            <p class="text-muted">覆盖采购、销售、库存、生产等全方位业务需求</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card stat-card">
                        <div class="card-body text-center py-4">
                            <i class="fa-solid fa-chart-line stat-icon text-success mb-3"></i>
                            <h4>数据驱动决策</h4>
                            <p class="text-muted">智能报表与分析工具，让决策更加精准高效</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card stat-card">
                        <div class="card-body text-center py-4">
                            <i class="fa-solid fa-shield-halved stat-icon text-danger mb-3"></i>
                            <h4>安全可靠</h4>
                            <p class="text-muted">严格的权限控制与数据保护机制</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
else
{
    <div class="container-fluid">
        <!-- 欢迎信息 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body d-flex align-items-center">
                        <div>
                            <h2 class="mb-1">您好，@CurrentUser.UserName</h2>
                            <p class="text-muted mb-0">今天是 @DateTime.Now.ToString("yyyy年MM月dd日") @DateTime.Now.ToString("dddd", new System.Globalization.CultureInfo("zh-CN"))</p>
                        </div>
                        <div class="ms-auto">
                            <button class="btn btn-primary" id="refreshDashboard">
                                <i class="fa-solid fa-sync-alt me-1"></i> 刷新数据
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 数据统计卡片 -->
        <div class="row mb-4">
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card stat-card bg-primary text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 class="mb-1">@Model.Dashboard.OrderCount</h3>
                                <p class="mb-0">今日订单数</p>
                            </div>
                            <div>
                                <i class="fa-solid fa-shopping-cart stat-icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent border-0 text-white py-2">
                        @if (Model.Dashboard.OrderGrowthRate > 0)
                        {
                            <small><i class="fa-solid fa-arrow-up me-1"></i> 较昨日增长 @Model.Dashboard.OrderGrowthRate%</small>
                        }
                        else
                        {
                            <small><i class="fa-solid fa-arrow-down me-1"></i> 较昨日下降 @Math.Abs(Model.Dashboard.OrderGrowthRate)%</small>
                        }
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card stat-card bg-success text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 class="mb-1">¥@Model.Dashboard.Sales.ToString("N0")</h3>
                                <p class="mb-0">本月销售额</p>
                            </div>
                            <div>
                                <i class="fa-solid fa-yuan-sign stat-icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent border-0 text-white py-2">
                        @if (Model.Dashboard.SalesGrowthRate > 0)
                        {
                            <small><i class="fa-solid fa-arrow-up me-1"></i> 较上月增长 @Math.Abs(Model.Dashboard.SalesGrowthRate)%</small>
                        }
                        else
                        {
                            <small><i class="fa-solid fa-arrow-down me-1"></i> 较上月下降 @Math.Abs(Model.Dashboard.SalesGrowthRate)%</small>
                        }
        </div>
    </div>
            </div>
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card stat-card bg-warning text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 class="mb-1">@Model.Dashboard.PendingTickets</h3>
                                <p class="mb-0">待处理工单</p>
                            </div>
                            <div>
                                <i class="fa-solid fa-clipboard-list stat-icon"></i>
        </div>
    </div>
</div>
                    <div class="card-footer bg-transparent border-0 text-white py-2">
                        <small>最早截止日期：@Model.Dashboard.EarliestDeadline.ToString("yyyy-MM-dd")</small>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="card stat-card bg-danger text-white h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <h3 class="mb-1">@Model.Dashboard.InventoryTurnover%</h3>
                                <p class="mb-0">库存周转率</p>
                            </div>
                <div>
                                <i class="fa-solid fa-warehouse stat-icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-transparent border-0 text-white py-2">
                        @if (Model.Dashboard.InventoryTurnoverGrowthRate > 0)
                        {
                            <small><i class="fa-solid fa-arrow-up me-1"></i> 较上月增长 @Model.Dashboard.InventoryTurnoverGrowthRate%</small>
                        }
                        else
                        {
                            <small><i class="fa-solid fa-arrow-down me-1"></i> 较上月下降 @Math.Abs(Model.Dashboard.InventoryTurnoverGrowthRate)%</small>
                        }
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表和待办事项 -->
        <div class="row mb-4">
            <div class="col-xl-8 mb-4 mb-xl-0">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title mb-0">销售趋势分析</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary active">本周</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary">本月</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary">本季度</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="salesChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card h-100">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title mb-0">待办事项</h5>
                        <button class="btn btn-sm btn-primary">新增</button>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            @foreach (var item in Model.Dashboard.TodoItems)
                            {
                                string itemClass = "todo-item";
                                if (item.IsCompleted)
                                {
                                    itemClass += " completed";
                                }
                                else if (item.IsOverdue)
                                {
                                    itemClass += " overdue";
                                }
                                
                                <div class="@itemClass">
                                    <div class="d-flex align-items-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="@item.Id" id="todo@(item.Id)" @(item.IsCompleted ? "checked" : "")>
                                        </div>
                                        <div class="ms-3">
                                            <h6 class="mb-1">@(item.IsCompleted ? $"<del>{item.Title}</del>" : item.Title)</h6>
                                            <p class="text-muted mb-0 small">
                                                @if (item.IsCompleted)
                                                {
                                                    <span>完成于：@item.CompletedDate?.ToString("yyyy-MM-dd")</span>
                                                }
                                                else if (item.IsOverdue)
                                                {
                                                    <span>已逾期：@item.DueDate.ToString("yyyy-MM-dd")</span>
                                                }
                                                else
                                                {
                                                    <span>截止日期：@item.DueDate.ToString("yyyy-MM-dd")</span>
                                                }
                                            </p>
                                        </div>
                                        <div class="ms-auto">
                                            @{
                                                string badgeClass = "bg-primary";
                                                string priorityText = "计划中";
                                                
                                                if (item.IsCompleted)
                                                {
                                                    badgeClass = "bg-success";
                                                    priorityText = "已完成";
                                                }
                                                else
                                                {
                                                    switch (item.Priority)
                                                    {
                                                        case TodoPriority.Urgent:
                                                            badgeClass = "bg-danger";
                                                            priorityText = "紧急";
                                                            break;
                                                        case TodoPriority.High:
                                                            badgeClass = "bg-warning";
                                                            priorityText = "高优先级";
                                                            break;
                                                        case TodoPriority.Medium:
                                                            badgeClass = "bg-info";
                                                            priorityText = "中等优先级";
                                                            break;
                                                        default:
                                                            badgeClass = "bg-primary";
                                                            priorityText = "计划中";
                                                            break;
                                                    }
                                                }
                                            }
                                            <span class="badge @badgeClass">@priorityText</span>
            </div>
        </div>
    </div>
                            }
                        </div>
                    </div>
                    <div class="card-footer text-center">
                        <a href="#" class="btn btn-sm btn-link text-primary">查看全部</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快捷操作区 -->
        <div class="row">
            <div class="col-12">
        <div class="card">
            <div class="card-header">
                        <h5 class="card-title mb-0">快捷操作</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card quick-action">
                                    <div class="card-body text-center py-3">
                                        <div class="rounded-circle bg-primary-soft d-inline-flex p-3 mb-3">
                                            <i class="fa-solid fa-plus text-primary fs-4"></i>
                                        </div>
                                        <h5>新建订单</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card quick-action">
                                    <div class="card-body text-center py-3">
                                        <div class="rounded-circle bg-success-soft d-inline-flex p-3 mb-3">
                                            <i class="fa-solid fa-truck text-success fs-4"></i>
                                        </div>
                                        <h5>物流管理</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card quick-action">
                                    <div class="card-body text-center py-3">
                                        <div class="rounded-circle bg-info-soft d-inline-flex p-3 mb-3">
                                            <i class="fa-solid fa-chart-pie text-info fs-4"></i>
                                        </div>
                                        <h5>数据报表</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 mb-3">
                                <div class="card quick-action">
                                    <div class="card-body text-center py-3">
                                        <div class="rounded-circle bg-warning-soft d-inline-flex p-3 mb-3">
                                            <i class="fa-solid fa-cog text-warning fs-4"></i>
                                        </div>
                                        <h5>系统设置</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
            </div>
                </div>
            </div>
        </div>
    </div>
}

@section scripts {
    <script src="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        layui.use(function(){
            var layer = layui.layer;
            
            // 刷新按钮点击事件
            document.getElementById('refreshDashboard')?.addEventListener('click', function() {
                layer.msg('数据刷新中...');
                setTimeout(function() {
                    layer.msg('数据已更新');
                }, 1000);
            });
            
            // 初始化图表
            if(document.getElementById('salesChart')) {
                var chartDom = document.getElementById('salesChart');
                var myChart = echarts.init(chartDom);
                var option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['销售额', '订单数', '客户数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '销售额',
                            type: 'line',
                            stack: '总量',
                            data: [12000, 13200, 10100, 13400, 19000, 23000, 21000],
                            smooth: true,
                            lineStyle: {
                                width: 3
                            }
                        },
                        {
                            name: '订单数',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310],
                            smooth: true,
                            lineStyle: {
                                width: 3
                            }
                        },
                        {
                            name: '客户数',
                            type: 'line',
                            stack: '总量',
                            data: [150, 132, 121, 154, 190, 230, 210],
                            smooth: true,
                            lineStyle: {
                                width: 3
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                
                // 响应式调整
                window.addEventListener('resize', function() {
                    myChart.resize();
                });
            }
            
            // 待办事项复选框事件
            document.querySelectorAll('.form-check-input').forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    var todoItem = this.closest('.todo-item');
                    if(this.checked) {
                        todoItem.classList.add('completed');
                        var title = todoItem.querySelector('h6');
                        title.innerHTML = '<del>' + title.textContent + '</del>';
                        var status = todoItem.querySelector('.badge');
                        status.className = 'badge bg-success';
                        status.textContent = '已完成';
                    } else {
                        todoItem.classList.remove('completed');
                        var title = todoItem.querySelector('h6');
                        title.innerHTML = title.textContent;
                    }
                });
            });
            
            // 快捷操作点击事件
            document.querySelectorAll('.quick-action').forEach(function(action) {
                action.addEventListener('click', function() {
                    var actionName = this.querySelector('h5').textContent;
                    layer.msg('正在跳转到' + actionName + '...');
                });
            });
        });
    </script>
}